<template>
  <div class="user-title-example">
    <h2>用户称号显示示例</h2>
    
    <!-- 显示当前登录用户的称号 -->
    <div class="example-section">
      <h3>当前用户称号</h3>
      <UserTitleDisplay 
        v-if="currentUserId"
        :userId="currentUserId"
        :username="userStore.userDisplayName"
      />
      <div v-else class="no-user">
        请先登录以查看您的称号
      </div>
    </div>
    
    <!-- 输入用户ID查看指定用户称号 -->
    <div class="example-section">
      <h3>查看指定用户称号</h3>
      <div class="input-group">
        <el-input
          v-model="targetUserId"
          placeholder="请输入用户ID"
          class="user-id-input"
        />
        <el-button 
          type="primary" 
          @click="viewUserTitle"
          :disabled="!targetUserId.trim()"
        >
          查看称号
        </el-button>
      </div>
      
      <UserTitleDisplay 
        v-if="showTargetUser"
        :userId="targetUserId"
        :username="targetUsername"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import UserTitleDisplay from './UserTitleDisplay.vue'

const userStore = useUserStore()

const targetUserId = ref('')
const targetUsername = ref('')
const showTargetUser = ref(false)

// 当前登录用户的ID
const currentUserId = computed(() => {
  return userStore.user?.id || userStore.user?.userId || userStore.user?.uid
})

const viewUserTitle = () => {
  if (targetUserId.value.trim()) {
    targetUsername.value = `用户 ${targetUserId.value}`
    showTargetUser.value = true
  }
}
</script>

<style scoped>
.user-title-example {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.example-section {
  margin-bottom: 40px;
}

.example-section h3 {
  margin: 0 0 16px 0;
  color: #374151;
  font-size: 18px;
}

.input-group {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.user-id-input {
  flex: 1;
}

.no-user {
  text-align: center;
  padding: 40px;
  color: #6b7280;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
</style>
